<template>
  <div class="main">
    <h2 class="main-index">实验二</h2>
    <p class="main-title">一阶系统的单位阶跃响应</p>
    <p class="sub-title">设一阶系统的传递函数为</p>
    <img class="formula" src="../assets/img/1.png" />
    <p class="sub-title">T为时间常量</p>
    <div class="line-box">
      <p><span>T(s)</span><span></span></p>
      <p v-for="(item, index) in TArr" :key="index">
        <span>{{ item }}</span>
        <span :style="{ background: colorArr[index] }"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <van-field
      style="margin-bottom: 0.2rem"
      v-model="TNumber"
      type="number"
      center
      clearable
      label="T(秒)"
      placeholder="请输入T值"
    >
      <template #button>
        <van-button size="small" @click="submit" type="primary"
          >提交</van-button
        >
      </template>
    </van-field>
    <div class="btn-box">
      <a
        href="javascript:;"
        @click="showHelp"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >帮助</a
      >
      <a
        href="javascript:;"
        @click="run"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >仿真</a
      >
      <a
        href="javascript:;"
        @click="clearData"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >清除</a
      >
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from "vant";
import { colorArr } from "../utils/config";
export default {
  name: "onePage",
  data() {
    return {
      TNumber: 0.1, // 输入值
      TArr: [], // 已提交的T值集合
      colorArr,
      myChart: null,
      option: null,
      yAxisType: "category",
      yAxisArr: [0, 0.2, 0.4, 0.6, 0.8, 1],
      xAxisArr: [0, 0.1, 0.2, 0.3, 0.4],
      seriesArr: [], // 计算后的值集合
    };
  },
  methods: {
    initChart() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 15;
      const needClear = false;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type:this.yAxisType,
          name: "t/s",
          nameTextStyle: {
            fontSize: normalFontSize,
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "w(t)",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ["none", "arrow"],
            show: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr,
      };
      this.myChart.setOption(this.option);
    },
    showHelp() {
      this.$weui.alert(
        "<p>1.本实验对一阶系统的单位阶跃响应进行仿真;</p><p>2.用户仅能改变时间常数;</p><p>3.用户在同一实验中按“提交”按钮可以输入多个不同系统的时间常数，用户最多可更改参数的次数为5次;</p><p>4.用户按“仿真”按钮，系统进行仿真;</p><p>5.按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>",
        {
          title: "帮助",
          className: "help",
          buttons: [
            {
              label: "确定",
              type: "primary",
              onClick: function () {
                console.log("ok");
              },
            },
          ],
        }
      );
    },
    submit() {
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      if (this.TArr.length >= 5) {
        return;
      }
      if (!this.TNumber || this.TNumber < 0) {
        Toast.fail("T值不合法");
        return;
      }
      this.TArr.push(this.TNumber);
    },
    clearData() {
      this.TNumber = 0.1;
      this.TArr = [];
      this.myChart = null;
      this.option = null;
      this.yAxisType = "category";
      this.yAxisArr = [0, 0.2, 0.4, 0.6, 0.8, 1];
      this.xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      this.seriesArr = [];
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.$nextTick(() => {
        this.initChart();
      });
    },
    run() {
      const that = this;
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      if (this.TArr.length < 1) {
        Toast.fail("请先提交T值");
        return;
      }

      let temptmax = this.TArr[0];
      let temptmin = this.TArr[0];
      for (let jr = 1; jr < this.TArr.length; jr = jr + 1) {
        if (temptmax < this.TArr[jr]) {
          temptmax = this.TArr[jr];
        }
        if (temptmin > this.TArr[jr]) {
          temptmin = this.TArr[jr];
        }
      }
      let dt = 80 / temptmax;
      let dy = 240;
      console.log(dt, dy);
      let t1 = temptmax;
      let t2 = 2 * temptmax;
      let t3 = 3 * temptmax;
      let t4 = 4 * temptmax;
      let x4 = 1;
      let x3 = 0.75;
      let x2 = 0.5;
      let x1 = 0.25;
      let y = 0;
      for (let jk = 0; jk < this.TArr.length; jk = jk + 1) {
        let y = 1 - Math.exp(-t / this.TArr[jk]);
        var t = 0;
        let arr = [];
        while (t < temptmax * 5) {
          t = t + temptmax * 0.025;
          y = 1 - Math.exp(-t / this.TArr[jk]);
          console.log(jk, t, y);
         arr.push([t,y])
        }
         
        that.seriesArr.push({
          data: arr,
          type: "line",
          showSymbol: false,
          smooth: true,
          lineStyle: {
            color: that.colorArr[jk],
          }
        })
        // drawLine(jk);
      }

      // 根据输入T的最大值设置横坐标
      // this.xAxisArr = [];
      // let TArrMap = JSON.parse(JSON.stringify(this.TArr)).sort();
      // const maxT = TArrMap[TArrMap.length - 1];
      // for (let i = 0; i < 5; i++) {
      //   this.xAxisArr.push((maxT * i).toFixed(2));
      // }
      // 计算每个T值的线条数据
      // this.TArr.forEach((item, index) => {
      //   let lineData = that.xAxisArr.map((child) => {
      //     return (1 - Math.pow(Math.E, -(child / item))).toFixed(4);
      //   });
      //   that.seriesArr.push({
      //     data: lineData,
      //     type: "line",
      //     showSymbol: false,
      //     smooth: true,
      //     lineStyle: {
      //       color: that.colorArr[index],
      //     },
      //   });
      // });

      this.yAxisType = "value";
      console.log(this.option);
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.myChart.dispose();

      this.$nextTick(() => {
        this.initChart();
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.line-box p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-box p span:first-child {
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}
.line-box p span:last-child {
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>